<template>
  <div>
    <h1>图表</h1>
    <div id="chart"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue';

// export const CountStaff = ()=>request.get("/api/countStaff");
import {CountStaff} from '@/api/stadium.js'
CountStaff()
.then(res=>{
  // 更新option
  option.value.tooltip={};
  option.value.xAxis.data=res.data.data.map(item=>item.day);
  var obj = option.value.series[0];
  obj.data = res.data.data.map(item=>item.staff);
  obj.type = "line";
  obj.smooth =true;
  obj.name="新增与员工"
  obj.lineStyle={width:5}
  var obj2={
    name:"新增用户",
    type:"line",
    smooth:true,
    data:res.data.data.map(item=>item.user)
  }
  option.value.series[1] = obj2;

   // 设置setOption
  echart.value.setOption(option.value)
 
})
// 实例,选项,挂载后初始化,
const echart = ref({});
// 选项数据
const option= ref({
  title:{text:"我爱echart"},
  xAxis:{data:[1,2,3,4,5,6]},
  yAxis:{},
  series:[{
    name:"fee",
    type:"bar",
    data:[500,300,100,5,900,50]
  }]
});
// 初始化放在挂载里面
onMounted(()=>{
  echart.value = echarts.init(document.getElementById("chart"),"light");
  echart.value.setOption(option.value);
})
</script>
<style lang="scss" scoped>
#chart{
  width: 800px;
  height: 600px;
}
</style>
 